<!-- 发言管理 -->
<template>
  <div>
    <ContainerSlot>
      <template slot="searchModule">
        <SearchForm :label-width="labelWidth" :form-config="formConfig" :form-data="formData" :slot-list="slotList">
          <template slot="searchBtn">
            <el-button type="primary" @click.prevent="search()">查询</el-button>
          </template>
        </SearchForm>
      </template>
      <template slot="contentModule">
        <Table :prop-list="propList" :list-data="tableData">
          <template slot="operation" slot-scope="{row}">
            <el-switch
              v-show="row.disableSendMsgId"
              v-model="row.disableSendMsgFlag"
              active-color="#ff4949"
              inactive-color="#13ce66"
              @change="edit(row)"
            />
          </template>
        </Table>
      </template>
      <template slot="footerModule">
        <el-pagination
          :current-page="currentPage"
          background
          :page-size="pageSize"
          :page-sizes="[10, 20, 30]"
          layout=" prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </template>
    </ContainerSlot>
    <!-- 对话框
    <el-dialog :title="`${title}发言管理`" :visible.sync="dialogFormVisible" top="30vh">
      <el-form :inline="true" :model="form">
        <el-form-item label="账号名称：" :label-width="formLabelWidth">
          <el-input v-model="form.Identification" />
        </el-form-item>
        <el-form-item label="用户名称：" :label-width="formLabelWidth">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="当前状态：" :label-width="formLabelWidth">
          <el-input v-model="form.state" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirmAdd">确 定</el-button>
      </div>
    </el-dialog> -->
  </div>
</template>

<script>
import ContainerSlot from '@/components/Container'
import SearchForm from '@/components/Form'
import Table from '@/components/Table'
import statementManagementApi from '@/api/specialist-consultation/inquiry-management/statement-management/index'

export default {
  name: '',
  components: { ContainerSlot, SearchForm, Table },
  data () {
    return {
      total: 1,
      currentPage: 1,
      pageSize: 10,
      propList: [
        // { prop: 'publisherId', label: '账号名称', minWidth: '80' },
        { prop: 'userName', label: '用户名称' },
        { prop: 'disableSendMsgFlagString', label: '当前状态' },
        { label: '操作', minWidth: '180', slotName: 'operation' }
      ],
      tableData: [],
      labelWidth: '100px',
      // 表单配置
      formConfig: [
        {
          label: '关键词',
          prop: 'name1',
          type: 'input',
          width: '150px'
        }
      ],
      // 插槽
      slotList: [{
        slotName: 'searchBtn'
      }],
      // 表单数据
      formData: {
        name1: ''
      },
      title: '添加',
      dialogFormVisible: false,
      formLabelWidth: '120px',
      form: {
        Identification: '',
        name: '',
        state: ''
      },
      switchValue: false
    }
  },
  mounted() {
    this.getstatementList()
  },
  methods: {
    async getstatementList(userName = '') {
      const params = {
        page: this.currentPage,
        size: this.pageSize,
        condition: {
          user: {
            userName
          }
        }
      }
      const res = await statementManagementApi.queryPageByCondition(params)
      if (res.code === 200) {
        this.tableData = res.data.content
        this.tableData.forEach(item => {
          item.userName = item.user.userName
          item.switchValue = false
        })
        this.total = res.data.totalElements
        // console.log(res.data)
      }
    },
    handleCurrentChange (e) {
      this.currentPage = e
      this.getstatementList()
    },
    handleSizeChange (e) {
      this.pageSize = e
      this.getstatementList()
    },
    del() {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          console.log('删除成功')
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    add() {
      this.dialogFormVisible = true
      this.title = '添加'
    },
    edit(row) {
      console.log(row)
      this.$confirm(row.disableSendMsgFlag ? '你确定要禁言此用户吗, 是否继续?' : '你确定要恢复此用户吗, 是否继续', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          const params = {
            disableSendMsgId: row.disableSendMsgId,
            disableSendMsgFlag: row.disableSendMsgFlag
          }
          const res = await statementManagementApi.restoreDisableSendMsg(params)
          if (res.code === 200) {
            console.log(res)
            if (res.data.disableSendMsgFlag) {
              this.$message({
                type: 'success',
                message: '禁言成功!'
              })
            } else {
              this.$message({
                type: 'success',
                message: '解禁成功!'
              })
            }
            this.getstatementList()
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消恢复'
          })
          this.getstatementList()
        })
    },
    async confirmAdd() {
      const params = {
        publisherId: this.form.Identification,
        disableSendMsgFlag: this.form.state,
        user: {
          userName: this.form.name
        }
      }
      const res = await statementManagementApi.addDisableSendMsgInfo(params)
      console.log(res, 'now')
    },
    reset() {
      this.form.classification = ''
      this.form.desc = ''
    },
    cancel() {
      this.dialogFormVisible = false
      this.reset()
    },
    search() {
      this.currentPage = 1
      this.getstatementList(this.formData.name1)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
  background: #0480fb;
}
// 设置dialog框叉号颜色
::v-deep .el-dialog__close {
  color: #fff;
}
// dialog框标题颜色
::v-deep .el-dialog__title {
  color: #fff;
}

</style>
